<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
    <link href="${ctx.resource}/css/vendor/sm.min.css?v=1.0.0" rel="stylesheet">
    <link href="${ctx.resource}/css/coupon/wheely-coupon.css?v=1.0.0" rel="stylesheet">
  </head>
  <body>
    <div class="page-group">
      <div class="page">
        <div class="content">
          <img src="${ctx.resource}/image/coupon/wheely/wheely-coupon-banner.png" alt="" class="coupon-banner">
          <div class="fs-coupon-wrap">
            <c:forEach var="batch" items="${batches}">
              <div class="coupon-item">
                <div class="coupon-inner">
                  <div class="coupon-cover">  
                    <img src="${ctx.resource}/image/coupon/wheely/wheely-coupon-${batch.couponTemplate.amount}.png">
                  </div>
                  <ul>
                    <li>${batch.templateName} </li>
                    <li>
                      <fmt:formatDate value="${batch.effectiveEndDate}" pattern="yyyy-MM-dd"/>
                      到期
                    </li>
                    <c:if test="${batch.couponTemplate.minAmount != 0}">
                      <li>满<fmt:formatNumber value="${batch.couponTemplate.minAmount/100}" maxFractionDigits="2" />元可用</li>
                    </c:if>
                  </ul> 
                </div>
              </div>
            </c:forEach> 
          </div>
          <div class="mobile-layout">
            <div class="input-label"><input type="text" name="mobile" class="mobile-input" value="" placeholder="请输入手机号"></div>
            <a href="javascript:void(0);" class="coupon-btn wheely-coupons-claim">确定</a>
          </div>
          
          
          <div class="activity-rules">
            <h6>活动规则</h6>
            <p>1.&nbsp;红包新老用户共享</p>
            <p>2.&nbsp;红包不可与其他优惠券叠加使用</p>
            <p>3.&nbsp;红包获取仅限微信用户</p>
            <p>4.&nbsp;红包截至时间为2017年12月31日</p>
            <p>5.&nbsp;其他未尽事宜，请咨询客服 4001861101</p> 
          </div>
        </div>
      </div>
    </div>
    
    <%@ include file="/WEB-INF/include/script.jsp"%>
    <d:resource type="script" root="${ctx.resource}/build" src="js/page/coupon/wheely-coupons-claiming.js" />
    <script type="text/javascript">
      require(['page/coupon/wheely-coupons-claiming'], function(page) {
        page.init()
      })
    </script>
  </body>
</html>
